<template>
    <div class="tmpl">
        <!-- 1. 轮播图：mint-ui中的swipe -->
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="item in swipeList">
              <a :href="item.url">
                  <img :src="item.img" alt="">
              </a>
          </mt-swipe-item>
        </mt-swipe>

        <!-- 2. 9宫格导航区域：使用mui中的9宫格样式 -->
        <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-home"></span>
                            <div class="mui-media-body">新闻资讯</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-email"></span>
                            <div class="mui-media-body">图片分享</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-chatbubble"></span>
                            <div class="mui-media-body">商品购买</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-location"></span>
                            <div class="mui-media-body">留言反馈</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-search"></span>
                            <div class="mui-media-body">视频专区</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-phone"></span>
                            <div class="mui-media-body">联系我们</div></a></li>
                </ul> 
        </div>
    </div>
</template>

<script>
    
    export default{
        data (){
            return {
                swipeList: [
                    // {
                    // url: "http://www.itcast.cn/subject/phoneweb/index.html",
                    // img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg"
                    // },
                    // {
                    // url: "http://www.itcast.cn/subject/phoneweb/index.html",
                    // img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner2-1.jpg"
                    // }
                ]
            }
        },
        methods: {
            getImgList (){
                var url = 'http://vuecms.ittun.com/api/getlunbo';
                this.$http.get(url).then(res=>{
                    this.swipeList = res.body.message;
                })
            }
        },
        created (){
            this.getImgList();
        }
    }

</script>

<style scoped>
    .tmpl {
        padding-top: 40px;
    }

    /* 轮播图 */
    .mint-swipe {
        height: 200px;
    }

    .mint-swipe img {
        width: 100%;
    }

    .mui-grid-view.mui-grid-9 {
        background-color: #fff;
        border-left: 0 none;
        border-top: 0 none;
    }

    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        border-right: 0 none;
        border-bottom: 0 none;
    }

    /* 9宫格： */
    .mui-icon {
        width: 50px;
        height: 50px;
        display: block;
        background-repeat: round;
        margin-left: 15px;
    }

    .mui-icon::before {
        content: '';
    }

    .mui-icon.mui-icon-home {
        background-image: url(../../statics/imgs/menu3.png);
    }

    .mui-icon.mui-icon-email {
        background-image: url(../../statics/imgs/menu4.png);
    }

    .mui-icon.mui-icon-chatbubble {
        background-image: url(../../statics/imgs/menu5.png);
    }

    .mui-icon.mui-icon-location {
        background-image: url(../../statics/imgs/menu6.png);
    }

    .mui-icon.mui-icon-search {
        background-image: url(../../statics/imgs/menu9.png);
    }

    .mui-icon.mui-icon-phone {
        background-image: url(../../statics/imgs/menu10.png);
    }
</style>